<template>
  <view class="feedback">
    <!-- 反馈表单 -->
    <view class="feedback-form">
      <!-- 反馈类型 -->
      <view class="form-item">
        <text class="label">反馈类型</text>
        <view class="type-list">
          <view 
            v-for="(type, index) in feedbackTypes" 
            :key="index"
            :class="['type-item', { active: selectedType === type.id }]"
            @click="selectType(type.id)"
          >
            {{type.name}}
          </view>
        </view>
      </view>

      <!-- 反馈内容 -->
      <view class="form-item">
        <text class="label">反馈内容</text>
        <textarea
          class="content-input"
          v-model="content"
          placeholder="请详细描述您的问题或建议..."
          :maxlength="500"
        />
        <text class="word-count">{{content.length}}/500</text>
      </view>

      <!-- 图片上传 -->
      <view class="form-item">
        <text class="label">上传图片（选填）</text>
        <view class="image-uploader">
          <view 
            class="image-item" 
            v-for="(image, index) in images" 
            :key="index"
          >
            <image :src="image" mode="aspectFill" @click="previewImage(index)" />
            <view class="delete-btn" @click.stop="deleteImage(index)">
              <uni-icons type="close" size="12" color="#fff" />
            </view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
            <uni-icons type="camera" size="24" color="#999" />
            <text>添加图片</text>
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="form-item">
        <text class="label">联系方式（选填）</text>
        <input
          class="contact-input"
          v-model="contact"
          placeholder="请留下您的手机号或邮箱"
          type="text"
        />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view 
      :class="['submit-btn', { disabled: !isValid }]"
      @click="submitFeedback"
    >
      提交反馈
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackTypes: [
        { id: 'bug', name: '功能异常' },
        { id: 'suggestion', name: '功能建议' },
        { id: 'content', name: '内容相关' },
        { id: 'other', name: '其他' }
      ],
      selectedType: '',
      content: '',
      images: [],
      contact: ''
    }
  },
  computed: {
    isValid() {
      return this.selectedType && this.content.trim().length > 0
    }
  },
  methods: {
    selectType(typeId) {
      this.selectedType = typeId
    },
    async chooseImage() {
      try {
        const res = await uni.chooseImage({
          count: 3 - this.images.length,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera']
        })
        this.images = [...this.images, ...res.tempFilePaths]
      } catch (error) {
        console.error('选择图片失败:', error)
      }
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.images,
        current: index
      })
    },
    deleteImage(index) {
      this.images.splice(index, 1)
    },
    async submitFeedback() {
      if (!this.isValid) return

      try {
        uni.showLoading({
          title: '提交中...'
        })

        // 上传图片
        const imageUrls = []
        for (const image of this.images) {
          try {
            const uploadRes = await uniCloud.uploadFile({
              filePath: image,
              cloudPath: 'feedback/' + Date.now() + '-' + Math.random().toString(36).slice(-6) + (image.match(/\.[^.]+$/)[0] || '')
            })
            imageUrls.push(uploadRes.fileID)
          } catch (error) {
            console.error('图片上传失败:', error)
          }
        }

        // 提交反馈
        const res = await uniCloud.callFunction({
          name: 'submitFeedback',
          data: {
            type: this.selectedType,
            content: this.content,
            images: imageUrls,
            contact: this.contact
          }
        })

        if (res.result.code === 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(res.result.message)
        }
      } catch (error) {
        uni.showToast({
          title: '提交失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss">
.feedback {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: env(safe-area-inset-bottom);
}

.feedback-form {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;

  .form-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      display: block;
    }
  }

  .type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .type-item {
      padding: 12rpx 30rpx;
      background: #f5f5f5;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #666;

      &.active {
        background: #5cb85c;
        color: #fff;
      }
    }
  }

  .content-input {
    width: 100%;
    height: 300rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }

  .word-count {
    font-size: 24rpx;
    color: #999;
    text-align: right;
    margin-top: 8rpx;
  }

  .image-uploader {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .image-item {
      width: 200rpx;
      height: 200rpx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }

      .delete-btn {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 40rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .upload-btn {
      width: 200rpx;
      height: 200rpx;
      background: #f5f5f5;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8rpx;

      text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .contact-input {
    width: 100%;
    height: 80rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }
}

.submit-btn {
  margin: 40rpx 20rpx;
  background: #5cb85c;
  color: #fff;
  text-align: center;
  padding: 30rpx;
  border-radius: 16rpx;
  font-size: 32rpx;

  &.disabled {
    background: #ccc;
  }

  &:active {
    opacity: 0.8;
  }
}
</style> 